<template>
  <v-sheet
    class="p-relative col-2 pa-0 d-flex"
    :height="$vuetify.breakpoint.smAndDown ? 300 : 500"
    @mouseleave="getCloseRightItem"
  >
    <v-sheet
      :width="$vuetify.breakpoint.smAndDown ? 4 : 5"
      class="h-100"
      color="primary"
    ></v-sheet>
    <v-sheet color="thirdary" class="w-100 h-100 overflow-auto left-list">
      <v-sheet
        class="d-flex justify-center justify-md-start py-md-5 pt-md-6 cur-point"
        :class="{
          'fontwhite--text': index === selectedItem,
          'fontblack--text': index !== selectedItem,
        }"
        :color="index === selectedItem ? 'primary' : 'thirdary'"
        v-for="(department, index) in departments"
        :key="index"
        @mouseenter="leftItemMouseEnter(index)"
      >
        <div
          class="d-flex flex-column flex-md-row align-center justify-center ml-md-5 ml-lg-10 mr-md-5"
        >
          <p
            class="= iconfont mb-2 mb-md-0 mt-2 mt-md-0"
            v-html="department.icon"
          ></p>
          <p
            class="font-size-1 text-center"
            v-show="$vuetify.breakpoint.smAndDown"
          >
            {{ department.name }}
          </p>
        </div>
        <div v-show="!isXs && !isSm">
          {{ department.name }}
        </div>
      </v-sheet>
    </v-sheet>
    <v-slide-x-transition hide-on-leave>
      <v-sheet
        v-show="isSelected"
        :width="$vuetify.breakpoint.xs ? 250 : 500"
        :class="{
          trans500: !$vuetify.breakpoint.xs,
          trans250: $vuetify.breakpoint.xs,
        }"
        color="primary"
        class="pa-2 p-absolute right top h-100 z-index-sm rounded-r-lg"
      >
        <div
          class="iconfont p-absolute right mr-5 thirdary--text cur-point"
          @click="getCloseRightItem"
        >
          &#xe639;
        </div>
        <div class="overflow-auto h-100 pl-5 rightItem-scrollbar pr-2">
          <div
            v-for="(detail, index) in departments[selectedItem || 0].details"
            :key="index"
            class="left-item"
          >
            <p class="secondary--text mb-1 mt-3 text-body-1 text-md-h6">
              {{ detail.title }}
            </p>
            <v-hover
              v-slot="{ hover }"
              v-for="(illness, index) in detail.illnesses"
              :key="index"
            >
              <span
                class="px-4 d-inline-block my-1 text-caption text-md-body-1 illnessHover"
                :class="{ 'fontwhite--text': !hover, 'secondary--text': hover }"
                @click="getDoctorInfoWithIllness(illness)"
              >
                {{ illness }}
              </span>
            </v-hover>
          </div>
        </div>
      </v-sheet>
    </v-slide-x-transition>
  </v-sheet>
</template>



<script>
import eventBus from "../../eventBus/eventBus";
import departments from "../../data/departments.js";
export default {
  data() {
    return {
      isSelected: false,
      selectedItem: "",
      departments,
    };
  },
  watch: {
    selectedItem() {},
  },
  computed: {
    isXs() {
      return this.$vuetify.breakpoint.xs;
    },
    isSm() {
      return this.$vuetify.breakpoint.sm;
    },
  },
  methods: {
    async getDoctorInfoWithIllness(illnessName) {
      const { data: doctorInfos } = await this.$axios.get(
        `illness/getDoctorInfo?IllnessName=${illnessName}`
      )
      ;
      eventBus.$emit("getDoctorInfoWithIllness", doctorInfos);
      this.getCloseRightItem();
    },

    leftItemMouseEnter(index) {
      this.selectedItem = index;
      this.isSelected = true;
      this.leftSelectItem = "";
    },

    getCloseRightItem() {
      this.isSelected = false;
      this.selectedItem = "";
    },
  },
};
</script>



<style lang="scss" scoped>
.left-item {
  span + span {
    border: 1px solid transparent;
    border-left-color: #fff;
  }
}
.illnessHover {
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}
.trans500 {
  transform: translateX(499px);
}
.trans250 {
  transform: translateX(249px);
}
.rightItem-scrollbar {
  &::-webkit-scrollbar-button {
    background-color: #fff;
  }

  &::-webkit-scrollbar {
    width: 3px;
  }
  &::-webkit-scrollbar-thumb {
    background: #fff;
  }
  &::-webkit-scrollbar-track {
    border-radius: 10px;
    background: transparent;
  }
}
.left-list {
  &::-webkit-scrollbar-button {
    background-color: #00bcd4;
  }

  &::-webkit-scrollbar {
    width: 5px;
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    background: #00bcd4;
  }
  &::-webkit-scrollbar-track {
    border-radius: 10px;
    background: transparent;
  }
}
</style>
